<template>
  <div>
    <!-- addDialogVisable = true -->
    <el-button type="primary" size="small" style="margin-bottom:10px"
      :disabled="cateId===-1"
      @click="handleAddDialOpen"
    >添加参数</el-button>
    <!-- 动态参数表 -->
    <el-table :data="attrList" border stripe>
      <el-table-column  type="expand">
        <template v-slot="scope">
          <el-tag class="attr-tag" 
          v-for="item in scope.row.attrValArr" :key="item" 
          closable 
          @close="handleAttrValDel(scope.row,item)">
            {{item}}
          </el-tag>
          <el-input v-if="scope.row.inputVisable"  
            class="attr-tag-input" 
            :ref="'attrInput'+cateId+scope.row.attr_id" 
            v-model="scope.row.inputValue" 
            size="small"
            @keyup.enter.native="$event.target.blur"
            @blur="handleAttrValAdd(scope.row)"
          >
          </el-input>
          <el-button v-else size="small"
            @click="showAttrInput(scope.row)"
          >+ 新建属性值</el-button>
        </template>
      </el-table-column>
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column label="参数名称" prop="attr_name"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          {{scope.row.attr_id}}
          <el-button size="mini" type="primary" icon="el-icon-edit"
            @click="handleEditDialOpen(scope.row)"
          >修改
          </el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete"
            @click="handleAttrDel(scope.row.attr_id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props:{
    cateId:Number,
    attrList:Array
  },
 
  methods:{
    // 打开添加框
    handleAddDialOpen(){
      this.$emit('handleAddDialOpen')
    },
    // 打开编辑框
    handleEditDialOpen(row){
      this.$emit('handleEditDialOpen',row)
    },
    // 属性值添加
    handleAttrValAdd(row){
      this.$emit('handleAttrValAdd',row)
    },
    // 属性值删除
    handleAttrValDel(row,item){
      this.$emit('handleAttrValDel',row,item)
    },
    // 显示属性值输入框
    showAttrInput(row){
      this.$emit('showAttrInput',row,this)
    },
    // 属性删除 
    handleAttrDel(attrId){
      this.$emit('handleAttrDel',attrId)
    }
  }
}
</script>
<style scoped>
.attr-tag{
  margin-right: 10px;
}
.attr-tag-input{
  width: 100px;
}
</style>